<template>
  <div class="ChatManagement">
    <el-aside>
      <div class="left">
        <el-aside class="actmgt-waring">
          <div class="left">
            <el-icon><InfoFilled color="rgb(255,209,0)" size="40"/></el-icon>
          </div>
          <div class="right">
            <div class="top">重点账号，系统判定意向客户，需人工对话!自动关闭关键词回复!</div>
          </div>
        </el-aside>
        <el-main class="el_main">
          <el-table
            :data="tableData"
            style=" overflow: hidden; font-size: 12px;"
            height="81vh"
            class="el_table"
            :span-method="arraySpanMethod"
            :row-class-name="tableRowClassName"
            table-layout="auto"
          >
            <!-- <el-table-column prop="name"  label="全选" align="center">
              <template #header>
                <el-radio-group v-model="radio1">
                  <el-radio label="全选" size="large"></el-radio>
                </el-radio-group>
              </template>
              <el-radio-group v-model="radio2">
                <el-radio label="1" size="large"></el-radio>
              </el-radio-group>
            </el-table-column> -->
            <el-table-column prop="name" label="头像" align="center">
              <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt="">
            </el-table-column>
            <el-table-column prop="name"  label="" align="center">
              <div>昵称：</div>
              <div>创建时间：</div>
            </el-table-column>
            <el-table-column prop="name" label="详细信息" align="center">
              <div>测试账号</div>
              <div>2022年4月10日</div>
            </el-table-column>
            <el-table-column prop="name" label="" align="center">
              <div>关注：<span>128</span></div>
              <div>粉丝：<span>5068</span></div>
            </el-table-column>
            <!-- <el-table-column prop="name" label="状态" align="center">
              <div><img src="@/assets/images/在线.png" style="width: 18px; height: 18px;" alt=""></div>
              <div>正常</div>
            </el-table-column> -->
            <el-table-column prop="name" label="操作" align="center">
              <template #default="scope">
                <el-button size="small" 
                  type="primary" 
                  @click="handleEdit(scope.$index, scope.row)"
                  >查看</el-button
                >
                <!-- <el-button
                  size="small"
                  type="primary"
                  @click="handleDelete(scope.$index, scope.row)"
                  >查看</el-button
                > -->
                <el-switch style="margin-left: 8px" v-model="value" active-text="开启" inactive-text="" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="消息数" align="center">
              <template #default="scope">
                <el-button size="small" 
                  type="primary" 
                  @click="handleEdit(scope.$index, scope.row)"
                  >私信</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  style="background: rgb(255,102,0); border: unset; border-radius: 45%; height: 15px; font-size: 10px"
                  @click="handleDelete(scope.$index, scope.row)"
                  >233+</el-button
                >
                <!-- <div style="width: 33px; height: 25px; font-size: 12px">23+</div> -->
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </div>
    </el-aside>
    <el-main style="margin-left: 20px">
      <div class="right">
        <el-container>
          <el-header class="right_el_header">
            <div class="right_el_header_top">
              <div>
                <img src="@/assets/images/chat(1).png" style="width: 23.66px; height: 23.66px; vertical-align:middle;" alt="">
                <span style="margin-left: 5px">关键词回复</span>
              </div>
              <div style="margin-left: 50px">
                <img src="@/assets/images/quick(1).png" style="width: 23.66px; height: 23.66px; vertical-align:middle;" alt="">
                <span style="margin-left: 5px">被关注回复</span>
              </div>
              <div style="margin-left: 50px">
                <img src="@/assets/images/phonecall(1).png" style="width: 23.66px; height: 23.66px; vertical-align:middle;" alt="">
                <span style="margin-left: 5px">私信</span>
              </div>
            </div>
            <div class="right_el_header_bottom">
              <div style="font-size: 12px; text-align: left">
                <div>通过编辑内容或关键词规则，快速进行自动回复设置。</div>
                <div>关闭自动回复之后，将立即对所有账号生效。</div>
              </div>
              <div>
                <el-switch v-model="value" active-text="启用" inactive-text="" />
              </div>
            </div>
          </el-header>
          <el-main class="el_main"  style="padding: 10px 15px; height: 73.6vh">
            <div class="el_main_top">
              <span>规则名称/关键字：</span>
              <el-input v-model="input" placeholder="请输入" />
              <el-button type="primary">查询</el-button>
            </div>
            <div style="margin-top: 10px">
              <el-table
                :data="tableData"
                style=" overflow: hidden; font-size: 12px;"
                height="469"
                stripe
                border
                :header-cell-style="{background: 'rgb(242,242,242'}"
                :span-method="arraySpanMethod"
                :row-class-name="tableRowClassName"
                table-layout="auto"
              >
                <el-table-column prop="name"  label="规则名称" align="center">
                  <!-- <div>昵称：</div>
                  <div>创建时间：</div> -->
                </el-table-column>
                <el-table-column prop="name" label="关键词" align="center">
                  <!-- <div>测试账号</div>
                  <div>2022年4月10日</div> -->
                </el-table-column>
                <el-table-column prop="name" label="回复内容" align="center">
                  <!-- <div>关注：<span>128</span></div>
                  <div>粉丝：<span>5068</span></div> -->
                </el-table-column>
                <el-table-column prop="name" label="操作" align="center">
                  <template #default="scope">
                    <el-button size="small" 
                      type="primary" 
                      @click="handleEdit(scope.$index, scope.row)"
                      >查看</el-button
                    >
                    <el-button
                      size="small"
                      type="primary"
                      @click="handleDelete(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="small"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-top: 10px; margin-left: 140px">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="100">
              </el-pagination>
            </div>
            <div style="margin-top: 10px; margin-left: 500px">
              <el-button type="primary">添加回复</el-button>
            </div>
          </el-main>
        </el-container>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
            tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        }
      ],
      value: true,
      tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
    }
  },
  methods: {

  }
}
</script>

<style scoped>
.ChatManagement {
  display: flex;
  justify-content: flex-start;
  /* align-items: center; */
  padding: 15px 20px;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el_main {
  background-color: #fff;
  border-radius: 5px;
}

.el_main_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.el_main_top .el-input{
  width: 380px;
  box-shadow: 0px 0px 1px #888888;
}

.right_el_header {
  background-color: #fff;
  padding: 10px 15px;
  height: 88px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-bottom: 15px;
}

.right_el_header_bottom {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right_el_header_top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.el-textarea__inner {
  height: 85px;
}

.span_button {
  line-height: 33px;
}

.el-form-item__content {
  line-height: 13px;
  text-align: left;
}

.text_div {
  margin-left: 5px;
}

.demo-ruleForm {
  background-color: #fff;
  padding: 5px 5px 5px 0;
  /* height: 76vh; */
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-y: hidden;
  font-size: 12px;
}

.el-form-item__label {
  font-size: unset;
}

.info-bottom-el-main::-webkit-scrollbar {
 display: none;
}

.info-bottom-el-main {
  height: 77vh;
  overflow-x: scroll;
  overflow-y: scroll;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.userInfo_div {
  white-space: nowrap;
}

.userInfo_div .el-input {
  width: 78%;
}

.alite_div {
  margin-left: -280px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #1074FD;
}

.el-upload--picture-card {
  width: 50px;
  height: 50px;
}

/* .el-form-item__label {
  margin-left: 40px;
} */

.demo-ruleForm .el-input__wrapper {
  box-shadow: 0px 0px 1px #888888;
  border-bottom: #888888;
}

.actmgt {
  margin: 15px 20px;
  /* overflow-y: hidden;
  overflow-x: hidden; */
}

.actmgt-left {
  background-color: white;
  margin-right: 15px;
  height: 85vh;
  border-radius: 5px;
}

.actmgt-middle {
  /* background-color: yellow; */
  margin-right: 15px;
  border-radius: 5px;
}

.actmgt-right {
  /* background-color: green; */
  padding: unset;
}

.actmgt-waring {
  /* width: 300px; */
  display: flex;
  background-color: #2E54EA;
  justify-content: flex-start;
  align-items: center;
  color: white;
  border-radius: 4px;
  height: 42px;
}

.actmgt-waring .left {
  margin-left: 20px;
  margin-top: 5px;
}

.actmgt-waring .right {
  font-size: 14px;
  margin-left: 10px;
}

.actmgt-search {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.el-input__wrapper {
  box-shadow: none;
}

.actmgt-search-input {
  width: 160px;
  border-bottom: 1px solid black;
}

.el-icon {
  font-size: 20px;
}

.el-aside {
  overflow: hidden;
  width: 570px;
}

.actmgt-right-info {
  display: flex;
  align-items: center;
  width: 12rem;
  font-size: 12px;
  padding: 10px;
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 5px;
  /* border: 1px solid black; */
  margin: 5px 0 5px 10px;
  border-radius: 5px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 0 5px 1px #2ed4ea;
}

.actmgt-right-info-left img {
  width: 38px;
  height: 38px;
  border-radius: 5px;
}

.actmgt-right-info-middle {
  text-align: left;
  margin-left: 10px;
}

.actmgt-right-info-right {
  margin-top: 14px;
}

.el-main {
  --el-main-padding: 0;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
}

.actmgt-left-right {
  width: 24.66px;
  background-color: #2E54EA;
  color: white;
  font-size: 12px;
  height: 63px;
  box-sizing: border-box;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  margin-right: 10px;
  box-shadow: 0 0 5px 1px #2ed4ea;

}

.actmgt-left-right span {
  display: inline-block;
  margin-top: 15px;
}

.el_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 40px 20px;
  /* margin-bottom: 5px; */
  border-bottom: 2px solid rgb(214, 212, 212);
}

.el_header-left {
  font-size: 14px;
}

.el_main {
  overflow: hidden;
}

.el-button--small {
  width: 28px;
}

.el_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-top: 2px solid rgb(214, 212, 212);
}

.info-right {
  width: 40px;
}

.info-right-el-header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom: 2px solid rgb(214, 212, 212);
  height: 66px;
}

.info-right-el-header-top-left {
  font-size: 13px;
  white-space: nowrap;
  text-align: left;
  /* margin-left: 10px; */
}

.info-right-el-header-top-left .top {
  font-size: 16px;
}

.info-right-el-header-top-left .bottom a{
  font-size: 16px;
}

.info-right-el-header-top-rgiht .button {
  width: 75px;
  height: 30px;
  margin-left: 15px;
}

</style>